<template>
   <van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
</template>

<script>
import { Coupon, CouponCell } from "vant";

export default {
props: ["proname", "originprice", "desc", "img3"],
// 注册组件
components: {
VanCoupon: Coupon,
VanCouponCell: CouponCell,
},
data() {
return {
coupons: [
/* 优惠券数据 */ 
{
available: 1,
condition: "无门槛\n最多优惠12元",
reason: "",
value: 150,
name: "乐享",
startAt: 1489104000,
endAt: 1514592000,
valueDesc: "1.5",
unitDesc: "元",
},
{
available: 1,
condition: "无门槛\n最多优惠12元",
reason: "",
value: 250,
name: "叠加",
startAt: 1489104000,
endAt: 1514592000,
valueDesc: "2.5",
unitDesc: "元",
},
],
selectedCoupon: null,
showCoupon: false,
chosenCoupon: -1,
disabledCoupons: [],
showList: false,
};
},
methods: {
onSelectCoupon(coupon) {
this.selectedCoupon = coupon;
this.showCoupon = false;
},
onExchange(code) {
console.log("兑换码：", code);
},
 onChange(selectedCoupon) {
this.chosenCoupon = selectedCoupon;
this.showList = false;
},
},
};
</script>

<style lang="less" scoped>

</style>